<template>
    <div class="steps-box" v-if="dataInfo.length >0">
        <div class="steps" v-for="(item, index) in dataInfo" :key="index">
            <span class="drop" :class="{'last':index == 0}"></span>
            <span class="line"></span>
            <div class="height:100px">
                <span class="title"> {{item.deal_str}} <Button type="primary" size="small" ghost @click="lookDetail(item)">查看详情</Button> </span>
                <span class="time"> {{item.c_time}} </span>
                <p class="explain"> 说明： {{item.explain}} </p>
            </div>

        </div>

        <Modal v-model="modal1" title="处理详情">
            <div style="width:300px;margin:30px auto">
                <span style="font-size:14px">拍照：</span>
                <img class="detail-pic" v-for="(item, index) in detail.pic" :key="index" :src="item" alt="" @click="clickPic([item])">
            </div>
            <div style="width:300px;margin:30px auto">
                <span style="font-size:14px"> 说明： </span>
                <span> {{detail.explain}} </span>
            </div>

        </Modal>
    </div>

</template>

<script>
    export default {
        props: ['dataInfo'],
        data() {
            return {
                modal1: false,
                detail: {}
            }
        },
        methods: {
            lookDetail(detail) {
                this.detail = detail
                this.modal1 = true
            },
            clickPic(picList) {
                this.$emit('clickImg', picList)
            }
        },

    }
</script>

<style lang='less' scoped>
    .steps-box {
        padding-top: 60px;
        padding-left: 80px;
    }

    .steps {
        position: relative;
        height: 80px;
        width: 50%;

        .drop {
            display: block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #aaa;
            z-index: 99;
        }

        .last {
            background-color: rgb(47, 76, 241);
        }

        .line {
            position: absolute;
            width: 1px;
            height: 80px;
            left: 4.5px;
            background-color: #aaa;
        }

        .title {
            position: absolute;
            top: -5px;
            left: 20px;
            white-space: nowrap;
        }

        .time {
            position: absolute;
            top: -5px;
            left: -80px;
        }

        .drop {
            position: absolute;
        }

        .explain {
            position: absolute;
            top: 20px;
            left: 26px;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
    }

    .steps:last-of-type {
        .line {
            display: none;
        }
    }

    .detail-pic {
        width: 300px;
        height: 180px;
    }
</style>